import React, { useState } from 'react';
import { Button, message, Modal } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import { TjModalTitle } from '../TjModal/TjModalTitle';
import { TjUploadContent } from './TjUploadContent';
import type { ITjUploadContentProps } from './TjUploadContent';
import './index.less';

const TjUpload: React.FC<ITjUploadProps> = (props) => {
  const [visible, setVisible] = useState<boolean>(false);

  const clickBtn = () => {
    if (props.disabled) {
      message.warning('请联系管理员获取相关权限');
      return;
    }
    setVisible(true);
  };

  const onCancel = () => {
    setVisible(false);
  };

  const { loading, ...stdProps } = props;

  return (
    <div className="tj-upload">
      <Button type="link" icon={<DownloadOutlined />} onClick={clickBtn} loading={loading}>
        导入
      </Button>

      <Modal
        title={<TjModalTitle title="导入" />}
        visible={visible}
        getContainer={() => document.querySelector('.tj-upload') as any}
        footer={null}
        destroyOnClose
        onCancel={() => setVisible(false)}
        maskClosable={false}
      >
        <TjUploadContent {...stdProps} onCancel={onCancel} />
      </Modal>
    </div>
  );
};

interface ITjUploadProps extends ITjUploadContentProps {
  loading?: boolean;
  disabled?: boolean;
}

export { TjUpload };
